<template>
	<div id="claimsAdd">
		<div class="wrapper">
			<h1>新增理赔</h1>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
				label-position="left"
				size="mini"
			>
				<el-form-item label="选择客户" prop="customer">
					<el-select
						v-model="ruleForm.customer"
						placeholder="请选择客户"
						label-width="200px"
					>
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择订单" prop="order">
					<el-select
						v-model="ruleForm.order"
						placeholder="请选择订单"
					>
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="事故时间" required>
					<el-col :span="11">
						<el-form-item prop="accidentTime">
							<el-date-picker
								type="date"
								placeholder="选择日期"
								v-model="ruleForm.accidentTime"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="事故图片" required>
					<el-upload
						class="upload-demo"
						action="http://localhost:3000/images/uploadImages"
						:on-preview="handlePreview"
						:on-remove="handleRemove"
						:before-remove="beforeRemove"
						:on-success="onSucess"
						multiple
						:limit="3"
						:on-exceed="handleExceed"
						:file-list="ruleForm.images"
					>
						<el-button size="mini" type="primary"
							>点击上传</el-button
						>
						<span slot="tip" class="el-upload__tip">
							只能上传jpg/png文件，且不超过500kb
						</span>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')"
						>立即创建</el-button
					>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import apis from "../../http/apis.js";
export default {
	data() {
		return {
			ruleForm: {
				customer: "",
				order: "",
				accidentTime: "",
				delivery: false,
				images: [],
			},
			rules: {
				customer: [
					{
						required: true,
						message: "请选择客户",
						trigger: "change",
					},
				],
				order: [
					{
						required: true,
						message: "请选择订单",
						trigger: "change",
					},
				],
				date: [
					{
						type: "date",
						required: true,
						message: "请选择日期",
						trigger: "change",
					},
				],
			},
		};
	},
	methods: {
		// 新增订单
		async addClaims() {
			const data = await apis.claims.addClaims({
				applyTime: new Date().toLocaleDateString(),
				accidentTime: this.ruleForm.accidentTime,
				images: this.ruleForm.images,
				ordersId: this.ruleForm.order,
				customersId: this.ruleForm.customer,
			});
			console.log(data);
		},
		//提交
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.addClaims();
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		addImages() {},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		handleRemove(file, images) {
			this.ruleForm.images = images;
			console.log(this.ruleForm.images);
		},
		handlePreview(file) {
			console.log(file);
		},
		handleExceed(files, images) {
			this.$message.warning(
				`当前限制选择 3 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + images.length} 个文件`
			);
		},
		beforeRemove(file, images) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		//上传成功
		onSucess(res, file, fileList) {
			this.ruleForm.images.push(res.data);
			console.log(this.ruleForm.images);
		},
	},
};
</script>

<style lang="scss">
#claimsAdd {
	.wrapper {
		width: 400px;
		height: 400px;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 auto;
		padding: 20px;
		h1 {
			margin-bottom: 20px;
		}
		.el-date-editor {
			margin: 0 auto;
		}
		.el-input__inner {
			width: 300px;
		}
	}
}
</style>
